<template>
	<view class="container">
		<view class="header">
			<uni-icons type="left" class="back-icon" color="#ffffff"></uni-icons>
			<text class="title">物资录入列表</text>
		</view>

		<view class="form-container">
			<uni-forms ref="goodsForm" :modelValue="formData" :rules="rules">
				<!-- 所属场区 -->
				<uni-forms-item label="所属场区" label-width="150rpx" required name="dept_id">
					<uni-data-select v-model="formData.dept_id" :localdata="factoryOptions" placeholder="请选择场区" />
				</uni-forms-item>

				<!-- 物资类型 -->
				<uni-forms-item label="物资类型" label-width="150rpx" required name="type">
					<uni-data-select v-model="formData.type" :localdata="typeOptions" placeholder="请选择物资类型" />
				</uni-forms-item>

				<!-- 物资名称 -->
				<uni-forms-item label="物资名称" label-width="150rpx" required name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入物资名称" />
				</uni-forms-item>

				<!-- 物资品牌 -->
				<uni-forms-item label="物资品牌" label-width="150rpx" required name="brand">
					<uni-data-select v-model="formData.brand" :localdata="brandOptions" placeholder="请选择物资品牌" />
				</uni-forms-item>

				<!-- 物资规格 -->
				<uni-forms-item label="物资规格" label-width="150rpx" required name="specs">
					<uni-data-select v-model="formData.specs" :localdata="specOptions" placeholder="请选择物资规格" />
				</uni-forms-item>

				<!-- 到期日期 -->
				<uni-forms-item label="到期日期" label-width="150rpx" required name="expire_time">
					<uni-datetime-picker type="date" v-model="formData.expire_time" placeholder="请选择到期日期" />
				</uni-forms-item>

				<!-- 录入数量 -->
				<uni-forms-item label="录入数量" label-width="150rpx" required>
					<view class="row">
						<uni-easyinput v-model="formData.num" placeholder="请输入数量" />
						<uni-data-select v-model="formData.unit" :localdata="unitOptions" placeholder="请选择单位" />
					</view>
				</uni-forms-item>

				<!-- 备注 -->
				<uni-forms-item label="">
					<view>
						<text class="form-label">备注:</text>
						<uni-easyinput type="textarea" v-model="formData.remark" placeholder="请输入备注" />
					</view>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submitForm">提交</button>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				// 表单数据模型
				formData: {
					dept_id: '',
					type: '',
					name: '',
					brand: '',
					specs: '',
					expire_time: '',
					num: '',
					unit: '',
					remark: '',
				},
				// 表单校验规则
				rules: {
					dept_id: {
						required: true,
						message: '请选择所属场区'
					},
					type: {
						required: true,
						message: '请选择物资类型'
					},
					name: {
						required: true,
						message: '请输入物资名称'
					},
					brand: {
						required: true,
						message: '请选择物资品牌'
					},
					specs: {
						required: true,
						message: '请选择物资规格'
					},
					expire_time: {
						required: true,
						message: '请选择到期日期'
					},
					num: {
						required: true,
						message: '请输入录入数量'
					},
					unit: {
						required: true,
						message: '请选择单位'
					},
				},
				// 下拉选项
				factoryOptions: [{
						text: '场区1',
						value: 1
					},
					{
						text: '场区2',
						value: 2
					},
				],
				typeOptions: [{
						text: '类型1',
						value: 'type1'
					},
					{
						text: '类型2',
						value: 'type2'
					},
				],
				brandOptions: [{
						text: '品牌1',
						value: 'brand1'
					},
					{
						text: '品牌2',
						value: 'brand2'
					},
				],
				specOptions: [{
						text: '规格1',
						value: 'spec1'
					},
					{
						text: '规格2',
						value: 'spec2'
					},
				],
				unitOptions: [{
						text: '单位1',
						value: 'unit1'
					},
					{
						text: '单位2',
						value: 'unit2'
					},
				],
			};
		},
		methods: {
			// 提交表单
			submitForm() {
				this.$refs.goodsForm.validate((valid) => {
					if (valid) {
						console.log('提交成功', this.formData);
					} else {
						console.log('表单验证失败');
					}
				});
			},
		},
	};
</script>



<style lang="scss">
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.form-label {
		margin-bottom: 8rpx;
		font-size: 28rpx;
		color: #333;
	}


	.row {
		display: flex;
		gap: 20rpx;
	}

	.header {
		width: 100%;
		height: 100rpx;
		background-color: #0000ff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
		font-size: 40rpx;
		color: #ffffff;
	}

	.title {
		font-size: 36rpx;
		color: #ffffff;
	}
</style>